<div class="layui-layout layui-layout-admin">
    {{render "public/header.html"}}
    {{render "public/menu.html"}}
    <div class="layui-body layui-content">
        <!-- 内容主体区域 -->
        <div class="layui-breadcrumb">
            <a href="/">主页</a>
            <a>
                <cite>运行信息</cite>
            </a>
        </div>
        
        <div class="layui-fluid">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <select lay-filter="select-menu">
                        {{$addr := .addr}}
                        {{range $k,$v := .clientList}}
                            {{if eq $v.State 1}}
                                <option value="{{$v.Addr}}" {{if eq $v.Addr $addr}}selected{{end}}>{{$v.Addr}}</option>
                            {{end}}
                        {{end}}
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15">
                {{range $k,$v := .systemInfo}}
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            {{$k}}
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font">{{$v}}</p>
                        </div>
                    </div>
                </div>
                {{end}}
            </div>
        </div>
    </div>
    {{render "public/footer.html"}}
</div>
<script src="/static/lib/layui/layui.js"></script>
<script>
    layui.use(['element', 'jquery', 'form'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        $('#flexible-icon').on('click', function () {
            if ($(this).hasClass('layui-icon-spread-left')) {
                $(this).addClass('layui-icon-shrink-right').removeClass('layui-icon-spread-left');
                $('.layui-layout-body').removeClass('min-layout');
            } else {
                $(this).addClass('layui-icon-spread-left').removeClass('layui-icon-shrink-right');
                $('.layui-layout-body').addClass('min-layout');
            }
        })

        // 监听top下拉框执行表格重载
        form.on('select(select-menu)', function (data) {
            window.location.href = '/runtime/info?addr=' + data.value;
        });

        if (window.innerWidth < 990) {
            $('.layui-layout-body').addClass('min-layout');
            $('#flexible-icon').addClass('layui-icon-spread-left').removeClass('layui-icon-shrink-right');
        }
        $(window).on('resize', function () {
            if (window.innerWidth < 990) {
                $('.layui-layout-body').addClass('min-layout');
                $('#flexible-icon').addClass('layui-icon-spread-left').removeClass(
                    'layui-icon-shrink-right');
            } else {
                $('.layui-layout-body').removeClass('min-layout');
                $('#flexible-icon').addClass('layui-icon-shrink-right').removeClass(
                    'layui-icon-spread-left');
            }
        })
    })
</script>